<template>
	<!-- 单点评吸历史查询 -->
	<view class="com_view">
		<scroll-view scroll-x="true" scroll-y="true" class="scroll_box">
			<view class="scroll_content">
				<!-- 表头 -->
				<view class="table_header">
					<view class="header_cell" v-for="header in Headers" :key="header.key"
					 :class="header.class+' '+header.bg">
						<text>{{ header.name }}</text>
						<view class="header_options" v-if="header.options&&header.options.length > 0">
							<view class="header_option" v-for="item in header.options" :key="item.value">
								<text>{{ item.label }}</text>
								<text>{{ item.value }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 表格内容 -->
				
				<view class="table_content">
					<view class="table_row" v-for="row in tableData" :key="row.id">
						<view class="table_cell" v-for="header in Headers" :key="header.key" :class="header.class">
						<!-- 	<view class="custom-header-line-1" v-if="header.isHeader" @click="$showFill(row[header.key], header.isHeader)">
								<text>{{ row[header.key] }}</text>
							</view> -->
							<text>{{ row[header.key] }}</text>
							<!-- <text v-if="header.type === 'text'">{{ row[header.key] }}</text>
							
							<text v-else> {{ row.meetingMonthlyCorrelationRep[header.key] }} </text> -->

						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	/** 表格数据 */
	const tableHeader = [
		{
			name:'样品编号',
			key:'number',
			type: 'text',
			isHeader: true,
			class: 'no_class',
			bg: 'no_bg'
		},{
			name:'牌别',
			key:'allowanceName',
			isHeader: true,
			type: 'text',
			class: 'name_class',
			bg: 'name_bg'
		},{
			name:'光泽',
			key:'smokeGloss',
			len: 0.5,
			area: [0, 5],
			options:[ { label: 'Ⅰ', value: '5' },{ label: 'Ⅱ', value: '4' },{ label: 'Ⅲ', value: '3' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'香气',
			key:'smokeAroma',
			len: 0.5,
			area: [0, 32],
			options:[ { label: 'Ⅰ', value: '32' },{ label: 'Ⅱ', value: '28' },{ label: 'Ⅲ', value: '24' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'谐调',
			key:'smokeHarmony',
			len: 0.5,
			area: [0, 6],
			options:[ { label: 'Ⅰ', value: '6' },{ label: 'Ⅱ', value: '5' },{ label: 'Ⅲ', value: '4' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'杂气',
			key:'smokeImpure',
			len: 0.5,
			area: [0, 12],
			options:[ { label: 'Ⅰ', value: '12' },{ label: 'Ⅱ', value: '10' },{ label: 'Ⅲ', value: '8' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'刺激性',
			key:'smokeThrill',
			len: 0.5,
			area: [0, 20],
			options:[ { label: 'Ⅰ', value: '20' },{ label: 'Ⅱ', value: '17' },{ label: 'Ⅲ', value: '15' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'余味',
			key:'smokeAftertaste',
			len: 0.5,
			area: [0, 25],
			options:[ { label: 'Ⅰ', value: '25' },{ label: 'Ⅱ', value: '22' },{ label: 'Ⅲ', value: '20' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'总计',
			key:'smokeTotal',
			isrequest: true,
			type: 'total',
			class: 'total_class'
		},
	]
	
	/** 提示使用的字典项 */
	const tipDict = {
		"smokeGloss": "光泽",
		"smokeAroma": "香气",
		"smokeHarmony": "谐调",
		"smokeImpure": "杂气",
		"smokeThrill": "刺激性",
		"smokeAftertaste": "余味",
	}
	export default {
		name:"monthlyHistory",
		props:{
			already: { // 是否提交过
				type: Boolean,
				default: false
			},
			tableData:{
				type: Array,
				default: function() { return [] }
			}
		},
		computed:{
			Headers() { return tableHeader }, // 表头列表
		},
	}
</script>

<style scoped lang="scss">
	.com_view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// flex: 1;
		height: 600px;
		padding: 20px;
		padding-top: 0;
		--def-cell-width: 170px;
		--def-table-bg: rgb(245, 247, 250);
	}
	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}
	.scroll_box {
		width: 100%;
		// height: 100%;
		height: calc(100% - 70px);
		.scroll_content {
			min-width: 100%;
			min-height: 100%;
			position: relative;
			width: max-content;
			background-color: var(--def-table-bg);
			.no_class {
				position: sticky;
				width: 100px;
				z-index: 2;
				left: 1px;
				background-color: var(--def-table-bg);
			}
			.name_class {
				position: sticky;
				z-index: 2;
				left: 100px;
				width: 250px;
				background-color: var(--def-table-bg);
			}
			.no_bg {
				background-image: url(@/static/Maskgroup.png);
			}
			.name_bg {
				background-image: url(@/static/Maskgroup.png);
				background-position: -30px 0px;
			}
			.no_fill {
				background-color: rgba(200, 16, 46, 0.5);
			}
		}
	}
	.table_header {
		width: max-content;
		min-width: 100%;
		background-image: url(@/static/Maskgroup.png);
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ddd;
		position: sticky;
		top: 0;
		z-index: 3;
		border-left: 1px solid #ddd;
		.header_cell {
			// min-width: 100px;
			// flex: 1;
			height: 100px;
			padding: 10px 0;
			width: var(--def-cell-width);
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #ddd;
		}
		.header_options {
			width: 100%;
			margin-top: 10px;
			padding: 0 10px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.header_option {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				font-weight: bold;
				color: #999;
			}
		}
	}
	
	.table_content {
		width: max-content;
		min-width: 100%;
		background-color: rgb(245, 247, 250);
		.table_row {
			width: max-content;
			min-width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ddd;
			border-left: 1px solid #ddd;
		}
		.table_cell {
			// flex: 1;
			// min-width: 100px;
			width: var(--def-cell-width);
			height: 50px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #ddd;
		}
		.line-1 {
			text-align: center;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			line-clamp: 1;
			-webkit-box-orient: vertical;
			padding: 0 5px;
			max-width: 100%;
		}
	}
</style>